<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <link rel="stylesheet" href="../lib/animate.css">
    <style>
        .box{
            width:170px;
            height:170px;
            background: darkcyan;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>{{title}}</h2>
        <myhead></myhead>
        <parent></parent>
    </div>
    <template id="parent">
        <div>
            <h2>parent = 父组件 - 1</h2>
            <hr>
            <childone
            :word="word"
            ref="child1"
            ></childone>
            <hr>
            <childtwo
            :setnewword="setnewword"
            @change="setnewword"
            :changeonebyref="changeOneByRef"
            ></childtwo>
        </div>
    </template>
    <template id="childone">
        <div>
            <h2>childone = 子组件 - 1</h2>
            <h2>count -- {{count}}</h2>
            <h2>
                msg -- {{msg}}
            </h2>
            
            <h2>word -- {{word}}</h2>
        </div>
    </template>
    <template id="childtwo">
        <div>
            <h2>childtwo = 子组件 - 2</h2>
            <button @click="changeOneCount">事件总线去修改组件one - count </button>
            <button @click="changeOneMsg">事件总线去修改组件one - msg </button>
            <hr>
            <button @click="changeOneByParent">中间人模式去修改组件one ($parent)  </button>
            <button @click="setnewword('wh2114 - 每天多背面试题 ')">中间人模式去修改组件one (反向props)  </button>
            <button @click="change">中间人模式去修改组件one (自定义事件)  </button>
            <button @click="changeonebyref">修改childone - msg   </button>



        </div>
    </template>
 
    <script>
        const bus = new Vue()  // 空的Vue 实例对象 
        Vue.component("myhead",{
            template:"<h2>wh2114 - 天天大声背面试题目 </h2>"
        })

        Vue.component("parent",{
            template:"#parent",
            data(){
                return {
                    word:"word hard for money"
                }
            },
            methods:{
                setnewword(word){
                    this.word = word;
                },
                changeOneByRef(){
                    this.$refs.child1.msg = "2114 - 越努力越幸运..."
                }
            }
        })
        Vue.component("childone",{
            template:"#childone",
            props:{
                word:String 
            },
            data(){
                return {
                    count:1000,
                    msg:"2114-daydayup"
                }
            },
            mounted(){
                bus.$once("qewsdaassdsadasads",n=>{
                    this.count+=n;
                })
            },
            created(){
                bus.$on("changeOneMsg",msg=>{
                    this.msg = msg 
                })
            }
        })
        Vue.component("childtwo",{
            template:"#childtwo",
            props:{
                setnewword:Function,
                changeonebyref:Function
            },
            methods:{
                changeOneCount(){
                    bus.$emit("qewsdaassdsadasads",220)
                },
                changeOneMsg(){
                    bus.$emit("changeOneMsg",'周末认真预习Vuex+VueRouter ')
                },
                changeOneByParent(){
                    this.$parent.word = "2114 - 你们累吗..."
                    this.$parent.$refs.child1.count++;
                },
                change(){
                    this.$emit('change','2114 - do not sleep?')
                }
            }
        })
   
        
        const vm = new Vue({
            data:{
                title:"Vue component 组件通讯(父子 兄弟) - 兄弟组件通信",
            },
            components:{
                first:{
                    template:"<h2>First - vue 组件初始化 </h2>"
                }
            },
            mounted(){
                document.getElementsByTagName("title")[0].innerHTML = this.title 
               
            }
        }).$mount("#app")


    </script>
    <!-- 
        组件  小巧  独立  可复用  
        组件系统 
        组件组织关系  
        1. 父子组件关系
        <A> 
            <B></B>
            <C></C>
        </A>
        2. 兄弟组件关系  
        <B></B>
        <C></C>

        Emit  发送
        On    监听 
        Once  只触发一次  


        组件之间的通信  
        1. 父组件访问子组件      （父组件修改子组件）
        a. props  必须动态props 父组件修改自身的变量  把变化的值传入 子组件  子组件接收动态props 
        b. refs      
        c. 事件center总线 (bus new Vue)
        d. events 事件 
        e. vuex (最后一天) 

        2. 子组件访问父组件
        a.  自定义事件   emit  子组件发送事件    on 父组件监听事件 修改内部变量   
        b.  $parent     父实例，如果当前实例有的话  父组件  
        c.  逆向props   父组件 把修改自身变量的方法函数通过props 传递给子组件 子组件执行这个props函数  实现子改父 
        d.  事件center总线   
        e.  vuex   

        3.  兄弟组件之间的通信  
        a. 事件center总线 (bus new Vue)  新建空的Vue  $emit $on  $once 
        b. 中间人模式  (子改父  父改子 )   把父亲当做中间人   6种 
        c. vuex  

        refs   this.$refs  
        1. 绑定到标签  指的当前的真实DOM 
        2. 绑定到组件  指的是当前的组件对象  直接修改组件内的变量  直接调用组件内部的函数  
     -->
</body>
</html>